<template>
    <div :class="recordItemClass">
        <div class="record-top">
            <div class="record-name">{{name}}</div>
            <div class="record-value">{{recordValue}}</div>
        </div>
        <div class="record-bottom">
            <div class="record-date">{{dateValue}}</div>
            <div class="record-desc">{{desc}}</div>
        </div>
    </div>
</template>

<script>
import { formatTime } from '@common/format';
export default {
    name: 'RecordItem',
    components: {},
    computed: {
        recordItemClass() {
            const { border, type } = this.$props;
            return `record-item ${border ? 'border-bottom' : ''} record-item-type-${type}`;
        },
        recordValue() {
            const { type, value } = this.$props;
            return `${type === 'add' ? '+' : '-'}${value}`;
        },
        dateValue() {
            const { date } = this.$props;
            return formatTime(date);
        },
    },
    props: {
        name: String,
        value: [String, Number],
        date: [String, Number],
        desc: String,
        type: {
            type: String,
            default: 'add', // add,minus
        },
        border: {
            type: Boolean,
            default: true,
        },
    },
    methods: {},
};
</script>

<style lang="less">
.record-item {
    .p-v(@gap);
    .p-h(@gap-md);
    &.border-bottom {
        .border-line();
    }
    &.record-item-type-add {
        .record-value {
            color: @red;
        }
    }
    .record-top, .record-bottom {
        .flex-row-between();
    }
    .record-name {
        .font-size();
    }
    .record-value {
        .font-size-md();
        font-weight: @font-weight-bold;
        color: @text-color;
    }
    .record-date {
        .font-size-sm();
        color: @gray-dark;
    }
    .record-desc {
        .font-size-sm();
        color: @gray-darker;
    }
}
</style>

